import React from "react";
import style from "./style.module.css";
import { Select, Cascader, Input, Space } from "antd";
import { AudioOutlined } from "@ant-design/icons";

const { Search } = Input;
const { Option } = Select;

const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: "#1890ff",
    }}
  />
);

const ShopSearch = (props) => {
  const levelChange = (value) => {
    //级联选择
    console.log(`selected ${value}`);
    const { selectStatus } = props;
    selectStatus(value);
  };
  const onSearch = (value) => {
    //模糊搜索
    const { handleSearch } = props;
    handleSearch(value);
  };
  // 下拉
  function onSelectSearch(val) {
    console.log("search:", val);
  }

  const { SearchForm } = props;
  // console.log(props, SearchForm);
  return (
    <div className={style.shopSearch}>
      {/* 级联选择 */}
      {SearchForm.LevelStatus && (
        <>
          <span style={{ fontSize: "12px" }}></span>
          <Cascader
            options={SearchForm.LevelStatus.data}
            onChange={levelChange}
            size="small"
            placeholder="请选择"
          />
        </>
      )}

      {/* 下拉框 */}
      {SearchForm.select && (
        <>
          <span
            style={{
              fontSize: "12px",
              marginLeft: "15px",
              marginRight: "8px",
            }}
          >
            {SearchForm.select.title}
          </span>
          <Select
            showSearch
            size="small"
            style={{ width: 200 }}
            placeholder="请搜索"
            optionFilterProp="children"
            onSearch={onSelectSearch}
            options={SearchForm.select.data}
          ></Select>
        </>
      )}

      {/* 模糊搜索 */}
      {SearchForm.search && (
        <>
          <span style={{ fontSize: "12px", marginLeft: "15px" }}>
            {SearchForm.search.title}
          </span>
          <Space direction="vertical">
            <Search
              size="small"
              placeholder={SearchForm.search.placeholder}
              onSearch={onSearch}
              style={{ width: 200 }}
            />
          </Space>
        </>
      )}
    </div>
  );
};

export default ShopSearch;
